<template>
  <div>
    <a-modal
      title="物流信息"
      :confirm-loading="expressModalLoading"
      :mask-closable="false"
      :destroy-on-close="true"
      :visible="visible"
      :footer="null"
      @cancel="$emit('update:visible',false)"
    >
      <div v-if="loading">
        <div class="example">
          <a-spin />
        </div>
      </div>
      <div v-else>
        <div style="border-bottom: 1px solid #f0f0f0;" v-for="(express, index) in express_list" :key="index">
          <div style="color: #426ab3;">{{express.datetime}}</div>
          <div>{{express.detail}}</div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  orderExpress
} from '@/api/order'
export default {
  components: {},
  props: {
    visible:{
      type:Boolean,
      default:false
    },
    orderId:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      activeKey: '1',
      express: {
        words: '',
      },
      expressModalLoading: false,
      express_list: [],
      loading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    this.expressLoad()
  },
  mounted() {},
  updated() {},
  methods: {
    expressLoad() {
      var params = {
        order_id: this.orderId
      }
      orderExpress(params).then((res) => {
        this.loading = false
        if (res.code === 0) {
          this.express_list = res.data.list
        } else {
          this.$error({
            content: res.msg,
          })
        }
      })
    }
  },
}
</script>

<style scoped>
.example {
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 30px 50px;
  margin: 20px 0;
}
</style>